<template>
  <div class="right-chart-1">
    <div class="title cursorPointer">品控任务</div>
    <div class="wrap">
      <template v-if="!noData">
        <div class="legend">
          <div
            v-for="item in summaryList"
            :key="item.status"
            class="legend-item"
            @click="handleLegendClick(item)"
          >
            <i :style="{ 'background-color': statusColors[item.status] }"></i>
            <span>{{ item.statusName }}({{ item.count }})</span>
          </div>
        </div>
        <dv-scroll-board
          ref="scrollBoard"
          :config="tableConfig"
          class="lc1-chart"
        />
      </template>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { getTaskSummary } from "@/api/dashboard/blowIrriagtionSpinLine";
import { mapMutations } from "vuex";
const pieColor = {
  0: "#5470c6", //待执行
  1: "#9e56be", //待审核
  2: "#fac858", //已驳回
  3: "#ff5050", //已超时
  4: "#74d047", //已完成
  5: "#5cc3eb", //执行中
  6: "#ab9578", //已关闭
};
export default {
  name: "RightChart2",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    groupItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      summaryList: [],
      statusColors: pieColor,
      tableConfig: {
        headerBGC: "#050f67",
        header: ["超时任务", "责任人"],
        data: [],
        waitTime: 3000,
        index: true,
        rowNum: 4,
        indexHeader: "序号",
        columnWidth: [90, 330, 120],
        align: ["center", "center", "center"],
        oddRowBGC: "#053a6d",
        evenRowBGC: "#091c56",
      },
    };
  },
  computed: {
    noData() {
      return !this.lineItem || !this.groupItem;
    },
  },
  created() {
    this.getSummary();
  },
  methods: {
    ...mapMutations("workbench", [
      "SET_TASKANALYSIS_DETAIL",
      "SET_TASKHIS_DETAIL",
    ]),
    // 获取统计数据
    getSummary() {
      if (!this.lineItem || !this.groupItem) {
        return;
      }
      const { factoryDeptCode, workshopCode, lineCode } =
        this.lineItem.properties;
      const { startTime, endTime, groupId } = this.groupItem;

      const param = {
        ownedFactory: factoryDeptCode,
        ownedWorkshop: workshopCode,
        ownedProductionLine: lineCode,
        startDateTime: startTime,
        endDateTime: endTime,
        queryQcTask: 1,
        groupId,
      };
      getTaskSummary(param)
        .then((res) => {
          this.summaryList = res?.data?.taskSummaryList || [];

          // 列表
          const taskList = res?.data?.taskList || [];
          const lists = taskList.map((ele) => [
            `<span class="text-wrap">${ele.taskName}</span>`,
            ele.operator,
          ]);
          this.tableConfig = { ...this.tableConfig, data: lists };
        })
        .catch(() => {
          this.summaryList = [];
          this.tableConfig = { ...this.tableConfig, data: [] };
        });
    },
    handleLegendClick(item) {
      if (!this.lineItem) {
        return;
      }
      const status = item.status;
      if (!status) {
        return;
      }
      // 当前状态的
      const { factoryDeptCode, workshopCode, lineCode, lineId } =
        this.lineItem.properties;

      let path = "./";

      if (status == "6" || status == "4") {
        //已完成,已关闭
        this.SET_TASKHIS_DETAIL({
          factoryDeptCode,
          workshopCode,
          lineCode,
          lineId,
          queryType: "workshop",
          queryQcTask: "1",
          taskType: "",
          status,
          time: [this.groupItem.startTime, this.groupItem.endTime],
        });
        path = "/taskMgmt/taskHistory";
      } else {
        this.SET_TASKANALYSIS_DETAIL({
          factoryDeptCode,
          workshopCode,
          lineCode,
          lineId,
          queryType: "workshop",
          queryQcTask: "1",
          taskType: "",
          status,
          time: [this.groupItem.startTime, this.groupItem.endTime],
        });
        path = "/taskMgmt/center";
      }
      this.$router.push({ path });
    },
  },
  watch: {
    groupItem: {
      handler() {
        this.getSummary();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.right-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px 35px;
    gap: 6px;

    .legend {
      width: 100%;
      height: 46px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: wrap;
    }

    .legend-item {
      width: 20%;
      text-align: center;
      i {
        display: inline-block;
        vertical-align: middle;
        width: 12px;
        height: 12px;
        border-radius: 2px;
        cursor: pointer;
      }
      span {
        padding-left: 5px;
        font-size: 14px;
        cursor: pointer;
      }
    }

    .lc1-chart {
      flex: 1;
    }
  }
  ::v-deep {
    .text-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      line-height: 17px;
      white-space: wrap;
    }
    .hader-sub-label {
      color: rgba(255, 255, 255, 60%);
      font-size: 13px;
      margin-left: 8px;
    }
  }
}
</style>
